<template>
	<div class="bookdetail">
		<div class="back">
			<img :src="'http://127.0.0.1/api/public/showimg/'+detaillist.pic">
			<div class="main">
				<header>
					<p><button @click="goback()"><i class="el-icon-arrow-left"></i></button>书籍详情</p>
					<hr>
				</header>
				<div class="header">
					<p>{{detaillist.name}}</p>
					<div class="star">
						月销量：{{detaillist.salenum}}
						<br />
						<button @click="add2Cart(detaillist.id)"><i v-show="cart == true" class="el-icon-shopping-cart-2"></i><i
								v-show="cart == false" class="el-icon-shopping-cart-full"></i></button>
						<button @click="star =! star"><i v-show="star == true" class="el-icon-star-off"></i><i
								v-show="star == false" class="el-icon-star-on"></i></button>
					</div>
				</div>
				<div class="detail">
					<p>书本序号：{{detaillist.sn}}</p>
					<p>作者：{{detaillist.author}}</p>
					<p>出版社：{{detaillist.maker}}</p>
					<p>出版时间：{{detaillist.tmake}}</p>
					<div class="brief">
						<img :src="'http://127.0.0.1/api/public/showimg/'+detaillist.pic">
						<br>
						<button @click="add2Cart(detaillist.id)">立即购买</button>
					</div>

					<div class="image">
						<button @click="show = 0">书籍详情</button>|<button @click="show = 1">评论区</button>
						<div v-show="show == 0">
							<p style="white-space: pre-wrap;">书籍详情：{{detaillist.info}}</p>
						</div>
						<div v-show="show == 1">
							<form @submit.prevent="add()">
								<el-input v-model="conlist.content" type="text" placeholder="请输入内容"></el-input>
								<el-rate v-model="conlist.rate" ></el-rate>
								<el-row>
									<el-button type="info" @click="addcon()">发布</el-button>
								</el-row>
							</form>
							<ul>
								<li v-for="(item,index) in commentslist" :key="index">
									<p>日期：{{item.tpost}}</p>
									<p style="white-space: pre-wrap;">评论：{{item.content}}</p>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<footer>
					<hr>
					<p>Copyright© 2015-2025 Dianying.com</p>
				</footer>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'MoblieBooksDetail',
		data() {
			return {
				detaillist: [],
				bookid: 0,
				num: 0,
				show: 0,
				comments: '',
				commentslist: [],
				conlist :{
					content: '',
					rate: 0
				},
				cart: true,
				star: true
			}
		},
		created() {
			this.detaillist = []
			this.bookid = this.$route.params.bookid;
			this.$axios.get('http://127.0.0.1/api/public/book/findById/' + this.bookid).then(
				(res) => {
					this.detaillist = res.data.data
					console.log(res)
				}).catch((err) => {
				return err
			})
			this.$axios.get('http://127.0.0.1/api/public/rate/findByBookid/' + this.bookid + '/1/6').then(
				(res) => {
					this.commentslist = res.data.data.comments
					console.log(res)
				}).catch((err) => {
				return err
			})
		},
		methods: {
			add() {
				this.commentslist[this.num].comment.push({
					txt: this.comments,
					date: new Date().getTime(),
				})
			},
			add2Cart(bookid) {
				let token = localStorage.getItem('token');
				if (token == null) {
					alert('未登录！请先登录...');
					this.$router.push('/moblie/login');
				} else {
					this.$get("/api/public/addCart/" + this.bookid).then((res) => {
						if (res.code == 200) {
							this.$message.success(res.data.msg);
						} else {
							this.$message.error(res.data.msg);
						}
					})
				}
			
			},
			addcon() {
				this.$postf("/api/public/rate/add/" + this.bookid, {
					rate: this.conlist.rate,
					content: this.conlist.content
				}).then((resp) => {
					console.log(resp)
					if (resp.status == 200) {
						this.$message({
							type: 'success',
							message: '评论成功!'
						});
						this.$router.push('/moblie/home')
					}
				})
			},
			goback() {
				this.$router.go(-1);
			}
		},
		
	}
</script>

<style scoped>
	.bookdetail {
		height: 100%;
	}

	.bookdetail .back img {
		width: 100%;
		height: 59.5rem;
	}

	.bookdetail .back .main {
		width: 100%;
		height: 58rem;
		position: absolute;
		top: 0;
		background-color: rgba(0, 0, 0, 0.6);
		padding: 0.8rem 0;
		color: white;
		text-align: center;
		font-weight: normal;
		overflow: hidden;
		white-space: nowrap;
	}

	.bookdetail .back .main button {
		border: none;
		background-color: unset;
		color: white;
	}

	.bookdetail .back .main .header {
		width: 90%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
	}

	.bookdetail .back .main .header p {
		font-size: 20px;
		line-height: 3rem;
	}

	.bookdetail .back .main .header p span {
		font-size: 14px;
	}

	.bookdetail .back .main .header p img {
		width: 10rem;
		height: 1%;
	}

	.bookdetail .back .main .header .star {
		color: #c0911d;
	}

	.bookdetail .back .main .header .star button {
		border: none;
		background-color: unset;
	}

	.bookdetail .back .main .header .star button i {
		font-size: 24px;
		margin: 0 0.5rem;
		color: #c0911d;
	}

	.bookdetail .back .main .detail {
		width: 90%;
		margin: 1rem auto;
		text-align: left;
		font-size: 14px;
	}

	.bookdetail .back .main .detail p {
		line-height: 1.5rem;
	}

	.bookdetail .back .main .detail .brief {
		text-align: center;
		margin-top: 1.5rem;
	}

	.bookdetail .back .main .detail .brief img {
		width: 50%;
		height: 50%;
	}

	.bookdetail .back .main .detail .brief button {
		width: 50%;
		height: 2rem;
		background-color: #c0911d;
		color: #D9D9D9;
		border: none;
		border-radius: 6px;
	}

	.bookdetail .back .main .detail .image p {
		width: 100%;
		line-height: 1.6rem;
	}

	.bookdetail .back .main .detail .image div {
		border: 0.1rem solid white;
		border-radius: 3px;
	}

	.bookdetail .back .main .detail .image button {
		width: 4rem;
		height: 3rem;
		border: none;
		background-color: unset;
		color: gold;
	}

	.bookdetail .back .main .detail .image ul li {
		border: 0.1rem solid #BABABA;
		margin: 0.1rem 0.4rem;
		border-radius: 3px;
	}

	.bookdetail .back .main .detail .image form input[type="text"] {
		width: 10rem;
		height: 2rem;
		border-radius: 6px;
	}

	.bookdetail .back .main .detail .image form input[type="submit"] {
		width: 5rem;
		height: 2rem;
		border-radius: 3px;
		border: none;
		background-color: #C0911D;
		color: #D9D9D9;
	}
</style>